<template>
    <view>
        <view class="header">
            
            <view class="personal">
                <view class="personal_item" style="border-bottom: 1px solid #f2f2f2;">
                    <text>手机号</text>
                    <input type="number" placeholder="请输入您的手机号" v-model="mobile" maxlength="11"/>
                </view>
                <view class="personal_item">
                    <text>联系人</text>
                    <input type="text" placeholder="请输入您的名字" v-model="name"/>
                </view>
            </view>
            
            <view class="personal">
                <view class="place_address" @click="map_click()">
                    <text>定位地址</text>
                    <input type="text" placeholder="请定位您的地址" disabled="true" v-model="ress"/>
                    <view class="place_icon">
                        <image src="../../static/icon/icon-dingwei@3x.png"></image>
                    </view>
                </view>
                <view class="personal_item">
                    <text>详细地址</text>
                    <input type="text" placeholder="请输入街道,门牌号(必填)" v-model="address"/>
                </view>
            </view>
            
            <view style="margin-top: 50rpx;">
                <button type="default" style="background-color: #18B566;color: #FFFFFF;width: 50%;" @click="send()">确定</button>
            </view>
        </view>
    </view>
</template>

<script>
    import QQMapWX from "../../../requestApi/qqmap-wx-jssdk.min.js";
    
    export default{
        data(){
            return{
                mobile: '',
                address: '',
                name: '',
                province_name: '',
                city_name: '',
                county_name: '',
                street: '',
                ress: '',
                id: null,
                type: '',
            }
        },
        onLoad(o) {
            this.type = o.type;
            this._getusership()
        },
        methods:{
            map_click(){
                const qqmapsdk = new QQMapWX({ key: getApp().globalData.qqmapsdkKey });
                uni.chooseLocation({
                    success: (res) => {
                        qqmapsdk.reverseGeocoder({
                            location: {
                                latitude: res.latitude,
                                longitude: res.longitude
                            },
                            success: data => {
                                this.province_name = data.result.address_component.province
                                this.city_name = data.result.address_component.city
                                this.county_name = data.result.address_component.district
                                this.street = data.result.address_component.street
                                this.ress = this.province_name+this.city_name+this.county_name+this.street
                            },
                        });
                    }
                });
                // uni.navigateTo({
                //     url:"/shop/pages/list/accountAddress"
                // })
            },
            send() {
                if(!this.$u.test.mobile(this.mobile)) {
                    uni.showToast({
                        title: '请输入正确手机号',
                        duration: 2000,
                        icon: 'none'
                    });
                    return ;
                } else if (this.$u.test.isEmpty(this.name)) {
                    uni.showToast({
                        title: '请输入联系人',
                        duration: 2000,
                        icon: 'none'
                    });
                    return ;
                } else if (this.$u.test.isEmpty(this.ress)) {
                    uni.showToast({
                        title: '请定位地址',
                        duration: 2000,
                        icon: 'none'
                    });
                    return ;
                } else if (this.$u.test.isEmpty(this.address)) {
                    uni.showToast({
                        title: '请输入详细地址',
                        duration: 2000,
                        icon: 'none'
                    });
                    return ;
                } else {
                    let data = {
                        is_def: 1,
                        mobile: this.mobile,
                        address: this.street + this.address,
                        name: this.name,
                        province_name: this.province_name,
                        city_name: this.city_name,
                        county_name: this.county_name,
                    }
                    if(!this.$u.test.isEmpty(this.id)) {
                        data.id = this.id;
                    }
                    this.$u.api.postEditShip(data).then(res => {
                        if(this.type == 2) {
                            uni.showModal({
                                title: '提示',
                                content: '设置成功',
                                showCancel: false,
                                success: function (res) {
                                    if (res.confirm) {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    }
                                }
                            });
                        } else {
                            uni.showToast({
                                title: '设置成功',
                                duration: 2000
                            });
                        }
                    }).catch(err => {
                        uni.showToast({
                            title: '设置失败',
                            icon: 'none',
                            duration: 2000
                        });
                    })
                }
            },
            // 地址管理
            _getusership() {
                this.$u.api.getusership().then(res => {
                    this.mobile = res[0].mobile;
                    this.address = res[0].address;
                    this.ress = res[0].area_name;
                    this.name = res[0].name;
                    this.id = res[0].id;
                    let area = res[0].area_name.split(' ');
                    this.province_name = area[0];
                    this.city_name = area[1];
                    this.county_name = area[2];
                }).catch(err => {
                    
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .personal{
        width: calc(100% - 40rpx);
        height: 210rpx;
        background-color:#ffffff;
        border: 1px solid #f2f2f2;
        border-radius: 20rpx;
        margin: 20rpx 20rpx 0 20rpx;
        align-items: center;
        justify-content: center;
        .personal_item{
            display: flex;
            width: 690rpx;
            height: 98rpx;
            background-color: #ffffff;
            align-items: center;
            padding-left: 20rpx;
            text{
                font-size: 32rpx;
                font-weight: bold;
                color: #191919;
            }
        }
        
        .place_address{
            display: flex;
            width: 690rpx;
            height: 98rpx;
            background-color: #ffffff;
            border-bottom: 1px solid #f2f2f2;
            align-items: center;
            padding-left: 20rpx;
            text{
                font-size: 32rpx;
                font-weight: bold;
                color: #191919;
            }
            image{
                width: 60rpx;
                height: 60rpx;
                margin-right: 40rpx;
            }
        }
        
        input {
            flex: 1;
            padding:0 30rpx;
        }
    }
</style>
